<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="3.css">        加载完后执行onload事件 -->
</head>

<body>
    <!-- <img src="1.png" alt="xxx">        加载完后执行onload事件  -->
    <div>
        111
    </div>
    <span>
        222
    </span>

    <button>按钮</button>

    <script>
        /* 
            页面初始化事件的两种方式
                1.onload:   这个初始化后执行的函数可以使用多次吗
                            不可以，谁最后被加载就调用谁
                            (全部加载完之后执行)

                2.DOMContentLoaded: ：当初始的 **HTML** 文档被完全加载和解析完成之后，**`DOMContentLoaded` **事件被触发，
                                      而无需等待样式表、图像和子框架的完全加载
                                      (加载完标签后执行，不等待标签里的内容)

                注册事件的补充知识点：
                    1.如果基于事件属性的方式注册，有相同的代码会使用最后加载的代码，并且值会执行一次
                    2.如果是基于监听器的方式注册事件，那么注册几个就会执行几个
         */
         const btn = document.querySelector("button")

        //  btnObj.onclick = function(){
        //      console.log("btn_onclick1")
        //  }

        //  btnObj.onclick = function(){
        //      console.log("btn_onclick2")
        //  }

        btn.addEventListener("click",function(){
            console.log("click1")
        })

         btn.addEventListener("click",function(){
            console.log("click2")
        })


         

        //  window.onload = function(){
        //     console.log("onload111")
        //  }

        //  window.onload = function(){
        //     console.log("onload222")
        //  }

        //  window.onload = function(){
        //     console.log("onload333")
        //  }

        /* 
            注册事件的时候，监听器注册事件可以多次执行
                           属性注册的事件只会执行最后的事件
         */
        window.addEventListener("load", function () {
            console.log("load111")
        })

        window.addEventListener("load", function () {
            console.log("load222")
        })

        window.addEventListener("load", function () {
            console.log("load333")
        })

        // window.addEventListener("DOMContentLoaded", function () {
        //     console.log("DOMContentLoaded444")
        // })

        // window.addEventListener("DOMContentLoaded", function () {
        //     console.log("DOMContentLoaded555")
        // })

        // window.addEventListener("DOMContentLoaded", function () {
        //     console.log("DOMContentLoaded666")
        // })


        document.onDOMContentLoaded = function () {
            console.log("onDOMContentLoaded111")
        }

        window.onDOMContentLoaded = function () {
            console.log("onDOMContentLoaded222")
        }

        window.onDOMContentLoaded = function () {
            console.log("onDOMContentLoaded333")
        }
    </script>
</body>

</html>